<template>
  <v-chart :option="show.option" autoresize />
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'ProgressEchars',

  components: {
    VChart
  },

  data() {
    return {
      show: {
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['2021-6-10', '2021-6-11', '2021-6-12', '2021-6-13']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'line',
              smooth: true,
              data: [1, 2, 4, 7],
              areaStyle: {}
            }
          ]
        }
      }
    }
  }
}
</script>
